<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="公司名称">
              <a-input placeholder="请输入公司名称" v-model="queryParam.companyName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
              <a-button type="default" style="margin-left: 10px"
                        @click="batchApproved()">批量通过</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- table区域-begin -->
    <div>

      <a-table
        :rowClassName="rowClassName"
        v-has="'company:default'"
        ref="table"
        size="small"
        :scroll="{x:800,y:350}"
        bordered
        rowKey="id"
        :columns="columns2"
        :pagination="ipagination"
        :dataSource="dataSource"
        class="j-table-force-nowrap"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">


      </a-table>

      <a-table
        :rowClassName="rowClassName"
        v-has="'company:approved'"
        ref="table"
        size="small"
        :scroll="{x:800,y:350}"
        bordered
        rowKey="id"
        :columns="columns"
        :pagination="ipagination"
        :dataSource="dataSource"
        class="j-table-force-nowrap"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">
        <span slot="action" slot-scope="text, record">
          <a @click="approved(record)">审核通过</a>

          <a-divider type="vertical" />
           <a-popconfirm
             title="确定要驳回此费用？"
             ok-text="确定"
             cancel-text="取消"
             @confirm="showModal(record)"
           >
              <a href="#">驳回</a>
            </a-popconfirm>

        </span>
      </a-table>
      <a-modal centered v-model="accountvisible" title="请选择要驳回的账号" @ok="handleOk">
        <a-table
          ref="table"
          size="small"
          :scroll="{x:true,y:300}"
          bordered
          rowKey="id"
          :columns="userColumns"
          :dataSource="userDataSource"
          :pagination="false"
          :rowSelection="{selectedRowKeys: userSelectedRowKeys, onChange: onUserSelectChange,type:'radio'}"
          class="j-table-force-nowrap">
        </a-table>
      </a-modal>
    </div>
    <company-data-modal ref="modalForm" @ok="modalFormOk"></company-data-modal>
  </a-card>
</template>

<script>

import { JeecgListMixin } from '@/mixins/JeecgListMixin'

import { httpAction, getAction, deleteAction, postAction } from '@/api/manage'
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'

import CompanyDataModal from './modules/CompanyDataModal'

export default {
  name: 'CompanyDataList',
  mixins: [JeecgListMixin, mixinDevice],
  components: { CompanyDataModal },
  data() {
    return {
      selectRejectId: '',
      userColumns: [
        {
          title: '用户账号',
          dataIndex: 'userName',
          width: 200,
          align: 'center'
        }
      ],
      userDataSource: [],
      accountvisible: false,
      userSelectedRowKeys: [],
      userSelectedRow: [],
      dataSource: [],
      selectedRowKeys: [],
      // 表头
      columns: [
        {
          title: '公司名称',
          align: 'left',
          width: 280,
          dataIndex: 'companyName'
        },
        {
          title: '开票信息',
          align: 'left',
          colSpan: 2,
          ellipsis: true,
          width: 300,
          dataIndex: 'billingInfoOne',
          customRender: (value, row, index) => {
            return row.billingInfoOne
          }
        },
        {
          title: '开票数量',
          align: 'center',
          colSpan: 0,
          width: 50,
          dataIndex: 'billingInfoNumber',
          customRender: (value, row, index) => {
            let count = 0
            if (row.billingInfoOne) {
              count = count + 1
            }
            if (row.billingInfoTwo) {
              count = count + 1
            }
            if (row.billingInfoThree) {
              count = count + 1
            }
            // return count + '条'
            let allNum = count + '条'
            const show = () => {

              this.showdetail(row)  //调用method里面的方法
            }
            return <span style="cursor:pointer" onClick={show}><u>{allNum}</u></span>
          }
        },
        {
          title: '提交人',
          align: 'center',
          width: 100,
          dataIndex: 'submitter'
        },
        {
          title: '状态',
          dataIndex: 'status',
          align: 'center',
          width: 100,
          customRender: function(text, record) {
            if (text == 2) {
              return '待审核'
            }
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 150,
          scopedSlots: { customRender: 'action' }
        }

      ],
      columns2: [
        {
          title: '公司名称',
          align: 'left',
          width: 280,
          dataIndex: 'companyName'
        },
        {
          title: '开票信息',
          align: 'left',
          colSpan: 2,
          ellipsis: true,
          width: 300,
          dataIndex: 'billingInfoOne',
          customRender: (value, row, index) => {
            return row.billingInfoOne
          }
        },
        {
          title: '开票数量',
          align: 'center',
          colSpan: 0,
          width: 50,
          dataIndex: 'billingInfoNumber',
          customRender: (value, row, index) => {
            let count = 0
            if (row.billingInfoOne) {
              count = count + 1
            }
            if (row.billingInfoTwo) {
              count = count + 1
            }
            if (row.billingInfoThree) {
              count = count + 1
            }
            // return count + '条'
            let allNum = count + '条'
            const show = () => {

              this.showdetail(row)  //调用method里面的方法
            }
            return <span style="cursor:pointer" onClick={show}><u>{allNum}</u></span>
          }
        },
        {
          title: '提交人',
          align: 'center',
          width: 100,
          dataIndex: 'submitter'
        },
        {
          title: '状态',
          dataIndex: 'status',
          align: 'center',
          width: 100,
          customRender: function(text, record) {
            if (text == 2) {
              return '待审核'
            }
          }
        }

      ],
      url: {
        list: '/companydata/progress',
        delete: '/companydata/delete',
        batchApproved: '/companydata/approved',
        deleteBatch: '/companydata/deleteBatch',
        exportXlsUrl: '/companydata/exportXls',
        importExcelUrl: 'companydata/importExcel',
        reject: '/companydata/reject'

      },
      dictOptions: {}
    }
  },
  created() {
    this.initDictConfig()
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    onUserSelectChange(selectedRowKeys, selectedRows) {
      this.userSelectedRowKeys = selectedRowKeys
      this.userSelectedRow = selectedRows
    },
    showModal(record) {
      this.selectRejectId = record.id
      this.accountvisible = true
      getAction('/fee/getuserlist').then(res => {
        if (res.success) {
          this.userDataSource = res.result
        }
      })
    },
    //驳回
    handleOk(e) {
      if (this.userSelectedRow.length == 1) {
        let param = {
          userName: this.userSelectedRow[0].userName,
          id: this.selectRejectId
        }
        httpAction(this.url.reject, param, 'post').then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.accountvisible = false
            this.loadData(1)
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          // that.confirmLoading = false
        })
      } else {
        this.$message.warning('请选择一个要驳回的账号')
      }
    },
    initDictConfig() {
      let LOGIN_USER_BUTTON_AUTH = sessionStorage.getItem('LOGIN_USER_BUTTON_AUTH')
      let listAuth = JSON.parse(LOGIN_USER_BUTTON_AUTH)
      for (let i = 0; i < listAuth.length; i++) {
        if (listAuth[i].action == 'company:approved') {
          this.queryParam.type = 1
          break
        }
      }
    },
    batchApproved() {
      if (this.selectedRowKeys.length > 0) {
        let param = {
          ids: this.selectedRowKeys
        }
        httpAction(this.url.batchApproved, param, 'post').then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.loadData(1)
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          // that.confirmLoading = false
        })
      } else {
        this.$message.warning('请选择要审核数据')
      }
    },
    approved(record) {
      let param = {
        ids: [record.id]
      }
      httpAction(this.url.batchApproved, param, 'post').then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadData(1)
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        // that.confirmLoading = false
      })
    },
    rowClassName(record, index) {
      return 'dark-row-1'
    },
    showdetail(val) {
      this.handleDetail(val)

    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
<style>
.dark-row-1 {
  background-color: #fff1cf;
}
</style>